import { LayoutType, LayoutModeType, LangType, LocaleLangType } from '../types'

export const useConfigStore = defineStore(
    STORE_CONFIG,
    () => {
        const config: LayoutType = reactive({
            isFold: false, // 是否折叠菜单
            isDark: false, // 是否启用暗黑模式
            isGrey: false, // 灰色模式
            isColorWeak: false, // 色弱模式
            isTabs: true, // 是否显示标签页

            isShowBreadcrumb: true, // 是否显示面包屑
            isMenuUniqueOpened: false, // 是否只保持一个子菜单的展开(手风琴)

            // 是否显示icon
            isShowMainIcon: true,
            isShowTabsIcon: true,
            isShowBreadcrumbIcon: true,
            isShowMenuIcon: true,

            // 后台主页面切换动画，可选值<slide-right|slide-left|el-fade-in-linear|el-fade-in|el-zoom-in-center|el-zoom-in-top|el-zoom-in-bottom>
            mainAnimation: 'slide-left',

            // 布局方式 Default | Classic | Horizontal | Vertical
            layoutMode: 'Default',
            logoWhere: 'Aside', // logo在哪里显示 Aside | Header
            size: 'large',

            // 是否显示水印
            isShowWatermark: false,
            // 水印数组
            watermark: ['Stars Admin', 'Stars Admin'],
            //水印颜色
            watermarkColor: ['#1a1a1a80', '#ffffff80'],

            // 主题色
            primaryColor: '#409eff',
            // 主题色预设
            predefinePrimaryColor: ['#409eff', '#90EE90', '#6954F0', '#CB41D7'],
            // 预设颜色
            predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', '#722ED1'],

            /* aside */
            // 菜单宽度
            menuWidth: 260,
            // sub菜单宽度, 仅Vertical模式有效
            subMenuWidth: 196,
            // 菜单背景色
            menuBackground: ['#ffffff', '#1b1b1b'],
            // 菜单右边框颜色
            menuBorderColor: ['#e8e8e8', '#2c2c2c'],

            /* 边框颜色 */
            borderColor: ['#e8e8e8', '#2c2c2c'],

            /* logo */
            // logo高度
            logoHeight: 50,
            // logo文字大小
            logoFontSize: 32,
            // logo背景色
            logoBackground: ['#ffffff', '#1b1b1b'],
            // logo文字颜色
            logoTextColor: ['#1b1b1b', '#ffffff'],

            /* header */
            // 高度
            headerHeight: 50,
            // header背景色
            headerBackground: ['#ffffff', '#1b1b1b'],
            // header下边框颜色
            headerBorderColor: ['#e8e8e8', '#2c2c2c'],
        })
        const lang = reactive<LocaleLangType>({
            // 默认语言，
            defaultLang: 'zh-cn',
            // 当在默认语言包找不到翻译时，继续在 fallbackLang 语言包内查找翻译
            fallbackLang: 'en',
            // 支持的语言列表
            langArray: [
                { name: 'zh-cn', value: '中文简体' },
                { name: 'en', value: 'English' },
            ],
        })
        // 设置语言
        const setLang = (value: LangType) => {
            lang.defaultLang = value
        }
        // 监听是否折叠菜单，更新系统布局
        watch(
            () => config.isFold,
            () => {
                update()
            },
        )
        // 更新系统布局
        const update = () => {
            switch (config.layoutMode) {
                case 'Default':
                    config.menuWidth = config.isFold ? 64 : 260
                    config.logoWhere = 'Aside'
                    config.subMenuWidth = 0
                    break
                case 'Classic':
                    config.menuWidth = config.isFold ? 64 : 260
                    config.logoWhere = 'Header'
                    config.subMenuWidth = 0
                    break
                case 'Horizontal':
                    config.logoWhere = 'Header'
                    config.subMenuWidth = 0
                    break
                case 'Vertical':
                    config.menuWidth = 64
                    config.subMenuWidth = config.isFold ? 64 : 196
                    config.logoWhere = 'Aside'
                    break
                default:
                    break
            }
        }
        // 设置系统布局
        const setLayoutMode = (mode: LayoutModeType) => {
            config.layoutMode = mode
            update()
        }
        // 获得px值
        const getPxValue = (name: keyof LayoutType) => config[name] + 'px'
        // 获得颜色属性值
        const getColorValue = (name: keyof LayoutType): string => {
            const colors = config[name] as string[]
            if (config.isDark) {
                return colors[1]
            } else {
                return colors[0]
            }
        }
        // 设置颜色属性值
        const setColorValue = (name: keyof LayoutType, value: any) => {
            const colors = config[name] as string[]
            if (config.isDark) {
                colors[1] = value
            } else {
                colors[0] = value
            }
        }
        // 设置属性值
        const setPropValue = (name: keyof LayoutType, value: any) => {
            config[name] = value as never
        }

        return {
            config,
            lang,
            setLang,
            getPxValue,
            getColorValue,
            setColorValue,
            setPropValue,
            setLayoutMode,
        }
    },
    {
        persist: true,
    },
)
